<!doctype html>
<html>
<head>
    <meta charset="utf-8"/>
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-touch-fullscreen" content="yes">
    <title>静态简单模式</title>
    <link href="/kissy/build/css/dpl/base.css" rel="stylesheet"/>
    <link href="../assets/default.css" rel="stylesheet"/>
    <style>
        .ks-popupmenu {
            border: 5px solid red;
        }
    </style>
</head>
<body>
<h1>从已有节点渲染</h1>

<div style="margin:10px auto; width:80%;text-align: center">
    <h2>
        static : input a or b or c or d or 3
    </h2>

    <div class="ks-combobox" id="combobox">
        <div class="ks-combobox-input-wrap">
            <input style="width:100%;height:18px;" aria-haspopup="true"
                   aria-combobox="list" role="combobox" combobox="off"
                   class="ks-combobox-input" tabindex="0"
                   value="a"
                   id="inp"
                    />
        </div>
    </div>
</div>

<h1>全新产生新节点</h1>

<div style="margin:10px auto; width:800px;text-align: center" id="newNew">
    <h2>
        static : input a or b or c or d or 3
    </h2>
</div>
<script src="/kissy/build/seed.js"></script>
<script src="/kissy/src/package.js"></script>
<script>
    KISSY.use("combobox", function (S, ComboBox) {
        /*
         local dataSource
         */
        (function () {

            var data = [
                '1243',
                "a123456鞋子测试ceshi",
                "b12345衣服测试",
                "c3464356袜子测试",
                "d23434手机测试"
            ];

            var basicComboBox = new ComboBox({
                width: 100,
                srcNode: S.one("#combobox"),
                // 初始就聚焦
                focused: true,
                hasTrigger: false,
                dataSource: new ComboBox.LocalDataSource({
                    data: data
                })
            });
            basicComboBox.render();

            var x = 1;

            S.all(window).on('beforeunload', function () {
                x = 0;
            });

            // ie needs setTimeout 0
            setTimeout(function () {
                // 得到焦点时展示全部
                S.one("#inp").on("focus", function () {
                    if (x) {
                        basicComboBox.sendRequest('');
                    }
                });
            }, 0);
        })();


        (function () {
            var data = ["a123456", "b12345", "c3464356", "d23434"];

            var basicComboBox = new ComboBox({
                render: "#newNew",
                // width:S.one("#inp").css("width"),
                dataSource: new ComboBox.LocalDataSource({
                    data: data
                }),
                highlightMatchItem: false,
                width: 200,
                value: 'a',
                hasTrigger: false,
                maxItemCount: 2,
                format: function (query, data) {
                    var ret = [];
                    for (var i = 0; i < data.length; i++) {
                        ret[i] = {
                            content: (data[i] + "")
                                    .replace(new RegExp(S.escapeRegExp(query), "g"),
                                            "<b>$&</b>"),
                            disabled: (i % 2 ? true : false)
                        };
                    }
                    return ret;
                }
            });
            basicComboBox.render();


            basicComboBox.on("click", function (e) {
                var item = e.target;
                S.log(item.get("value") + "\n" + item.get("content") +
                        "\n" + item.get("textContent"));
            });
        })();
    });
</script>
</body>
</html>